<!--  -->
<template>
  <div class="treeWrapper">
    <el-tabs v-model="activeName" type="card" @tab-click="handleChangeTabs">
      <el-tab-pane label="中压" name="zy">
          <TreeItem v-if="activeName == 'zy'" :propData="activeName" @handleClickTreeNodeItem="handleClickTreeNodeItem"></TreeItem>
      </el-tab-pane>
      <el-tab-pane label="高压" name="gy">
          <TreeItem v-if="activeName == 'gy'" :propData="activeName" @handleClickTreeNodeItem="handleClickTreeNodeItem"></TreeItem>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TreeItem from './TreeItem.vue';
export default {
  data() {
    return {
      activeName: 'zy',
      tableObj: {
        tdsbm: '',
        sbfl: '',
        activeName: ''
      }
    };
  },

  components: {
    TreeItem
  },

  methods: {
    handleChangeTabs(tab) {
      const that = this
      that.activeName = tab.name
      let tableObj = {
          tdsbm: '',
          sbfl: '',
          activeName: tab.name
      }
      that.tableObj = JSON.parse(JSON.stringify(tableObj))
      that.$emit("handleClickTreeNode", tableObj)
    },
    handleClickTreeNodeItem(obj) {
      const that = this
      let tableObj = {}
      if (that.activeName == 'zy') {
          tableObj = {
              tdsbm: obj.tdsbm,
              sbfl: '',
              activeName: obj.activeName
          }
      } else {
          tableObj = {
              tdsbm: '',
              sbfl: obj.sbfl,
              activeName: obj.activeName
          }
      }
      that.tableObj = JSON.parse(JSON.stringify(tableObj))
      that.$emit("handleClickTreeNode", tableObj)
    }
  },
};
</script>
<style lang='scss' scoped>
.treeWrapper {
    height: 100%;
}
.treeWrapper /deep/ .el-tabs {
    height: 100%;
}
.treeWrapper /deep/ .el-tabs__content {
    width: 100%;
    height: calc(100% - 56px);
    overflow: auto;
}
</style>